<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<title>设置时间</title>

		<link rel="stylesheet" href="../css/framework7.material.min.css" type="text/css">
		<!-- <link rel="stylesheet" href="../layui/css/layui.css" type="text/css"> -->



		<script src="../js/jquery-3.3.1.min.js" type="text/javascript"></script>

		<script type="text/javascript" src="../layui/layui.js" charset="utf-8"></script>
		<!-- <link rel="stylesheet" type="text/css" href="../css/jquery.datetimepicker.css" /> -->
		<!-- <script src="../js/jquery.datetimepicker.full.min.js"></script> -->
	</head>
	<body class="" style="height: 900px;" onload="a()">

		<!-- Views -->

		<div class="navbar">
			<div class="navbar-inner">
				<div class="center sliding">设置时间</div>
				<div class="right">
					<a href="#" class="link icon-only open-panel"><i class="icon icon-bars-blue"></i></a>
				</div>
			</div>
		</div>

		<span class="floating-button addbtn" style="top: 8%;left: 48%;"><i class="icon icon-plus"></i></span>
		<span class="floating-button " style="top: 8%;left: 20%;" id="bb"><img src="../images/empty.png" width="16px" height="16px" /></span>
		<span class="floating-button " style="top: 8%;right: 20%;" id="bbb"><img src="../images/jian.png" width="16px" height="16px" /></span>

		<div class="pages navbar-through toolbar-through" style="top: 11%;height: 80%;">
			<div data-page="index" class="page">

				<!--内容开始-->
				<script>
					$(document).ready(function() {
						ki = $('ul').children('li').length + 1;
					
					
// 						$("ul").append(
// 							'<li class="swipeout" >' +
// 							'<div class="item-content">' +
// 							'<div class="item-inner">' +
// 							'' +
// 
// 							'</div>' +
// 
// 							'</div>' +
// 							'</li>'
// 						);
					});
				</script>

				<div class="page-content">

					<div class="list-block">

						<ul id="it">

						</ul>

						<div class="col-100 ">
							<button class="button button-fill color-red" style="width: 100%" id="save">保存</button>
						</div>


						<input type="text" id="ff" placeholder=" - " class="time" />
						====<br />
						<input type="text" id="d" placeholder=" - " class="time" />
						====<br />
						<input type="text" class="layui-input" id="test-limit2" placeholder="yyyy-MM-dd">


					</div>

				</div>


			</div>
			<!--内容结束-->

		</div>


		<script>
			layui.use(['laydate'], function() {

				laydate = layui.laydate;
			});

			layui.use(['laydate'], function() {

				laydate = layui.laydate;

				laydate.render({
					elem: '.time',
					type: 'time',
					theme: "#1a7bc5",
					min: "06:00:00",
					value: '07:00:00 - 06:00:00',
					range: true,
					done: function(value, date) {
						// alert("d:"+value+" "+  $("#test9").val())
						for (var i in date)
							console.log("i：" + i + " " + date[i])
						return;
					}


				})
			})

			function a() {
layui.use(['laydate'], function() {

				laydate = layui.laydate;
			});

				layui.use(['laydate'], function() {

					laydate = layui.laydate;

					laydate.render({
						elem: '.time',
						type: 'time',
						theme: "#1a7bc5",
						min: "06:00:00",
						value: '06:00:00 - 06:00:00',
						range: true,
						done: function(value, date) {
							// alert("d:"+value+" "+  $("#test9").val())
							for (var i in date)
								console.log("i：" + i + " " + date[i])
							return;
						},
						

					});

					laydate.render({
						elem: '.time',
						type: 'time',
						theme: "#1a7bc5",
						min: "06:00:00",
						value: '06:00:00 - 06:00:00',
						range: true,
						done: function(value, date) {
							// alert("d:"+value+" "+  $("#test9").val())
							for (var i in date)
								console.log("i：" + i + " " + date[i])
							return;
						},
						

					});
					var ins22 = laydate.render({
						elem: '#test-limit2',
						min: 0,
						max: 30,
						ready: function() {
							var today = new Date(); //获得当前日期
							var year = today.getFullYear(); //获得年份
							var month = today.getMonth() + 1; //此方法获得的月份是从0---11，所以要加1才是当前月份
							var day = today.getDate(); //获得当前日期
							today = year + "-" + month + "-" + day;
							// alert("Fdg")
							// ins22.hint('日期可选值设定在 <br>'+today+' 到 2080-10-14');
							
						},
						done: function(value, date) {
							alert("d:"+value+" ")
							for (var i in date)
								console.log("i：" + i + " " + date[i])
							return true;
						},
					});

				});

			}

			$("#bb").click(function() {


				$('ul').children().filter("li").remove();
			})

			$("#bbb").click(function() {
				$('ul li:last-child').remove()
				// $('ul li:last').remove()
			})
			$("#save").click(function() {
				var ullen = $('ul').children('li').length;
				// alert("p:" + $('ul').children('li').length);
				arr_sk = [];
				arr_xk = [];
				for (var k = 1; k <= ullen; k++) {
					var sk = $("#" + k + "begin").val();
					var xk = $("#" + k + "over").val();
					arr_sk.push(sk);
					arr_xk.push(xk);

				}

				$.post("http://localhost:86/HBuilder/xops/Back.php", {

					type: "Time",

					begin: arr_sk.join(","),
					over: arr_xk.join(","),
					token: "1ab66e59325257b60b971d4afa1505ce"

				}, function(data, status) {

					obj = JSON.parse(data);
					if (obj.code == 200) {

						layer.msg('保存成功!', {
							icon: 1,
							time: 1500
						});


					} else if (obj.code == 202) {
						layer.msg('保存失败!', {
							icon: 1,
							time: 1500
						})
					}

				})
			})
			// <img src="../images/right2.png"  />
			$(".addbtn").click(function() {
				ki = $('ul').children('li').length + 1;

				$("ul").append(
					'<li class="swipeout" >' +
					'<div class="item-content">' +
					'<div class="item-inner">' +
					'<span name="" id="" style="margin-left:5%;">' + '第' + (ki) + '节' +
					'</span>' +
					'<span style="color: red;">  <input type="text"   placeholder=" - " class="time"  id='+ki+'over style="margin-right: 20px;border-width: 0;color:blue;font-size: 15px;" lay-key="5"/></span> ' +

					'</div>' +

					'</div>' +
					'</li>'

				);
			
			   ttt()
               layui.use(['laydate'], function() {
               
               	laydate = layui.laydate;
            
				laydate.render({
					elem: '.time',
					type: 'time',
					theme: "#1a7bc5",
					min: "06:00:00",
					value: '06:00:00 - 06:00:00',
					range: true,
					done: function(value, date) {
						// alert("d:"+value+" "+  $("#test9").val())
						for (var i in date)
							console.log("i：" + i + " " + date[i])
						
					}


				});	
				
				laydate.render({
					elem: '2over',
					type: 'time',
					theme: "#1a7bc5",
					min: "06:00:00",
					value: '06:00:00 - 06:00:00',
					range: true,
					done: function(value, date) {
						// alert("d:"+value+" "+  $("#test9").val())
						for (var i in date)
							console.log("i：" + i + " " + date[i])
						return;
					},
					
				
				});
				   });
				// alert("ki3:" + ki)

	


			});
			
			function ttt(){
				// alert("gf")
				$("#2over").attr("value",'06:00:00 - 06:00:00')
				// alert($(".time").attr("value",'test'))
				 $(".time").css("color","red")
			}
		</script>

	</body>
</html>
